<template>
  <div id="app">
    <div id="shoppingcart">
      <table>
        <!-- 第一行，标题 -->
        <tr>
          <td>
            <input type="checkbox" v-model="isCheckedAll">全选
          </td>
          <td>商品</td>
          <td>单价(元)</td>
          <td>数量</td>
          <td>小记(元)</td>
          <td>操作</td>
        </tr>
        <!-- 第二行开始，要用循环 -->
        <tr v-for="(good, index) in goods" :key="good.id">
          <td>
            <input type="checkbox" v-model="good.checked">
          </td>
          <td>{{ good.goods_name }} </td>
          <td>{{ good.goods_price }} </td>
          <td>
            <button @click="good.goods_num > 0 ? good.goods_num-- : ''">-</button>
            <input type="text" v-model="good.goods_num" class="ipt">
            <button @click="good.goods_num++">+</button>
          </td>
          <td>{{ good.goods_price * good.goods_num }}</td>
          <td>
            <button class="danger" @click="deleteItem(good.id)">删除</button>
          </td>
        </tr>
      </table>
      <!-- footer部分 -->
      <footer class="footer">
        <div class="footer-left">
          <input type="checkbox" v-model="isCheckedAll" />
          <span>全选</span>
          <button @click="deleteChecked" class="danger">删除选中的商品</button>
          <span>共{{ goods.length }}件商品，已选择{{ checkedLength }}件</span>
        </div>
        <div class="footer-right">
          <div>
            合计(不含运费): <span>¥ {{ totalPrice }}</span>
          </div>
          <button>去结算</button>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  // 要渲染的数据
  const goods = ref([
    {
      id: 1,
      goods_name: '华为手环',
      goods_price: 169,
      goods_num: 1,
      checked: true
    },
    {
      id: 2,
      goods_name: '索尼耳机',
      goods_price: 163,
      goods_num: 1,
      checked: true
    },
    {
      id: 3,
      goods_name: '小米汽车',
      goods_price: 1890,
      goods_num: 1,
      checked: false
    },
    {
      id: 4,
      goods_name: 'iPhone14',
      goods_price: 1699,
      goods_num: 1,
      checked: true
    }
  ])

  // 方法
  // 根据 id 删除某一个项目
  function deleteItem(id) {
    if (window.confirm('确定要删除该商品嘛？')) {
      goods.value = goods.value.filter(good => good.id !== id)
    }

  }

  // 删除选中的项目
  function deleteChecked() {
    if (window.confirm('确定要删除勾选的商品吗？'))
      goods.value = goods.value.filter(good => !good.checked)
  }


  // 计算属性
  // 计算商品总价
  const totalPrice = computed(() => {
    let total = 0
    goods.value.forEach(good => {
      if (good.checked) {
        total += good.goods_price * good.goods_num
      }
    })
    return total
  })

  // 计算选中的商品个数
  const checkedLength = computed(() => {
    return goods.value.filter(good => good.checked).length
  })

  // 全选所有的商品
  const isCheckedAll = computed({
    get() {
      if (goods.value.length === 0) {
        return false
      }
      /* 当所有商品都选中的时候，全选状态才会勾选，如果是空数组会返回true，所以得考虑 */
      return goods.value.every(good => good.checked)
    },
    set(newValue) {
      goods.value.forEach((item) => {
        item.checked = newValue
      })
    }
  })

</script>

<style scoped>
  @import url('./assets/shopping-cart.css');
</style>
